<template>
  <div>
    <div class="componentStore">
      <div class="meunTitle">
        <span class="font"> 组件库 </span>
        <span class="closeImg"></span>
        <span class="fitImg"></span>
      </div>
      <div class="searchLan">
        <input type="text" placeholder="搜索组件" />
        <span class="searchImg"></span>
      </div>
      <div class="basicCompTitle">基础组件</div>
      <ul>
        <li draggable="true" @dragstart="dragstart" data-flag="TextComponent">
          <img
            src="../assets/icon_text.png"
            alt="找不到图片"
            draggable="false"
          />
          <div>文本</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftVue",
  data() {
    return {};
  },
  methods: {
    dragstart(e) {
      console.log(e.target.dataset.flag, e.offsetX, e.dataTransfer);
      e.dataTransfer.setData("flag", e.target.dataset.flag);
      e.dataTransfer.setData("menuComponentOffsetX", e.offsetX);
      e.dataTransfer.setData("menuComponentOffsetY", e.offsetY);
    },
  },
};
</script>

<style scoped>
.componentStore {
  width: 35t0px;
  height: 600px;
  border-right: 2px solid #f4f4f4;
}
.meunTitle {
  height: 48px;
  width: 100%;
  padding-top: 16px;
}
.font {
  float: left;
  margin-left: 15px;
  /* margin-top: 16px; */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  text-align: left;
  vertical-align: middle;
}
.fitImg,
.closeImg {
  float: right;
  background-image: url("../assets/left_spring.png");
  width: 20px;
  height: 20px;
  background-size: 60px 41px;
  background-repeat: no-repeat;
  margin-right: 10px;
}
.fitImg {
  background-position: -18px -18px;
}
.closeImg {
  background-position: 2px -18px;
}
.searchLan {
  position: relative;
  margin: 12px 5px 0 1px;
  padding-left: 8px;
  height: 65px;
  width: 266px;
  border-bottom: 1px solid #f4f4f4;
}
input {
  float: left;
  height: 28px;
  width: 266px;
  outline: none;
  font-size: 12px;
  text-align: left;
  line-height: 28px;
}
.searchImg {
  position: absolute;
  left: 90%;
  top: 5%;
  margin: 2px 5px 0 0;
  height: 24px;
  width: 24px;
  background: 50% no-repeat;
  background-image: url("../assets/left_spring.png");
  background-size: 75px 51px;
  background-position: -47px -25px;
}
.basicCompTitle {
  width: 100%;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border-bottom: 1px solid #f4f4f4;
}
li {
  list-style: none;
  height: 113px;
  width: 33.33333%;
  border: solid hsla(0, 0%, 92.9%, 0.6);
}
</style>